<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--    &lt;!&ndash; 引入 Bootstrap &ndash;&gt;-->
<!--    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 最新的 图表 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .modal-dialog {
            position: absolute !important;
            top:50% !important;
            left:50% !important;
            transform:translate(-50%,-50%) !important;
            -webkit-transform:translate(-50%,-50%) !important;
            -moz-transform:translate(-50%,-50%) !important;
            -ms-transform:translate(-50%,-50%) !important;
            -o-transform:translate(-50%,-50%) !important;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">One more separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" />
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        拦截记录
                    </h3>
                </div>
                <div class="panel-body">
                    <table id="table" ></table>
                </div>
            </div>
<!--            <div class="row clearfix">-->
<!--            <div class="jumbotron">-->
<!--                <h1>-->
<!--                    Hello, world!-->
<!--                </h1>-->
<!--                <p>-->
<!--                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.-->
<!--                </p>-->
<!--                <p>-->
<!--                    <a class="btn btn-primary btn-large" href="#">Learn more</a>-->
<!--                </p>-->
<!--                <table id="table" ></table>-->
<!--            </div>-->
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        近七天拦截趋势
                    </h3>
                </div>
                <div class="panel-body">
                    <canvas id="myChart" width="400" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4 column">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        今日拦截TOP5
                    </h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped" height="227">
                        <thead>
                        <tr>
                            <th>网站</th>
                            <th>拦截次数</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{range $key,$value := .Topda }}
                        <tr>
                            <td>{{$value.key}}</td>
                            <td>{{$value.val}}</td>
                        </tr>
                        {{end}}
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                        </tr>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                        </tr>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                        </tr>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4 column">
            <h2>
                Heading
            </h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
    </div>
    <div class="col-md-4 column">
<!--        <a id="modal-907434" href="#modal-container-907434" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a>-->
        <div class="modal fade" id="modal-container-907434" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">
                            详情
                        </h4>
                    </div>
                    <div class="modal-body" id="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    const data = {
        labels: {{.Key}},
        datasets: [{
            label: '近七天拦截趋势',
            data: {{.Value}},
            fill: true,
            borderColor: 'rgb(255, 48, 48)',
            tension: 0.5
        }]
    };
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx,{
        type: 'line',
        data: data,
    });

    $("#table").bootstrapTable({ // 对应table标签的id
        url: "/loglist", // 获取表格数据的url
        editable:true,//开启编辑模式
        cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
        striped: true,  //表格显示条纹，默认为false
        pagination: true, // 在表格底部显示分页组件，默认false
        pageList: [10], // 设置页面可以显示的数据条数
        pageSize: 10, // 页面数据条数
        pageNumber: 1, // 首页页码
        height:470,
        sidePagination: 'server', // 设置为服务器端分页
        queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
            return {
                pageSize: params.limit, // 每页要显示的数据条数
                offset: params.offset, // 每页显示数据的开始行号
                sort: params.sort, // 要排序的字段
                sortOrder: params.order, // 排序规则
                startTime: $("#sTime").val(),
                endTime:$("#eTime").val()
            }
        },
        columns: [
            {
                title: "时间",
                field: 'time_localtime',
                align:'center',
                valign:'center',
            },
            {
                title: "过滤器",
                field: 'filter_rule',
                align:'center',
                valign:'center',
            },
            {
                title: "网站",
                field: 'server_name',
                align:'center',
                valign:'center',
            },
            {
                title: "请求方式",
                field: 'type',
                align:'center',
                valign:'center',
            },
            {
                title: "IP",
                field: 'ip',
                align:'center',
                valign:'center',
            },
            {
                field: 'operator',
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: '10%',
                // visible: false,
                formatter: function (value, row, index) {
                    // var sid_code = base64encode(row.sid + '');   //  sid 加密处理
                    // alert(sid_code);
                    return '<a  href="#modal-container-907434" data-toggle="modal" title="显示" rel="show">' +
                        '<i class="glyphicon glyphicon-eye-open"></i> ' +
                        '</a>'+
                        '<a href="#modal-container-907434" data-toggle="modal" title="修改" rel="edit">' +
                        '<i class="glyphicon glyphicon-pencil"></i> ' +
                        '</a>'+
                        '<a href="javascript:void(0)" title="删除" rel="del">' +
                        '<i class="glyphicon glyphicon-trash text-danger"></i> ' +
                        '</a>';
                },
                events: {
                    'click a[rel=show]': function (e, value, row, index) {
                        var mbody = '<table class="table  table-bordered"><tr><th>时间</th><td>'+ row.time_localtime +"</td>"+
                            '<th>攻击IP</th><td>'+ row.ip +'</td></tr>'+
                            '<tr><th>类型</th><td>'+ row.type +'</td>'+
                            '<th>过滤器</th><td>'+ row.filter_rule +'</td></tr></table>'+
                            '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">URI地址</h3></div><div class="panel-body">'+ row.uri + '</div></div>'+
                            '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">User-Agent</h3></div><div class="panel-body">'+ row.user_agent + '</div></div>'+
                            '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">过滤规则 <span style="color: red">《疑似误拦截提交入口》</span></h3></div><div class="panel-body">'+ row.incoming_value + '</div></div>';
                        $("#modal-body").empty();
                        $("#modal-body").prepend(mbody)
                    },
                    'click a[rel=edit]': function (e, value, row, index) {

                    },
                    'click a[rel=del]': function (e, value, row, index) {
                        if(confirm('此操作不可逆，请确认是否删除？')){
                            $.ajax();
                        }
                    }
                }
            }
        ]

    })

    $(function() {
        //搜索时的请求参数
        $(".search").click(function(){
            $('#table').bootstrapTable('refresh', {url:'/getWatchFeedbacks',query: {startTime:startTime,endTime:endTime}});
        });
    })
</script>
</body>
</html>